<script setup lang="ts">
import { inject, ref, reactive, unref } from 'vue'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { Search } from '@/components/Search'
import { Table } from '@/components/Table'
import { BaseButton } from '@/components/Button'
import { FormData } from '@/api/product/list'
import { ElDescriptions, ElDescriptionsItem, ElDivider } from 'element-plus'
import { createImageViewer } from '@/components/ImageViewer'
import { useTable } from '@/hooks/web/useTable'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
const emit = defineEmits(['close', 'get-list'])
const currentRow = inject('currentRow') as FormData

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'product.name',
    label: '门店名称',
    form: { hidden: true },
    detail: { hidden: true }
  },
  {
    field: 'product.name',
    label: '售卖次数',
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true }
  },
  {
    field: 'product.name',
    label: '关联时间',
    search: { hidden: true },
    form: { hidden: true },
    detail: { hidden: true }
  }
])
// @ts-ignore
const { allSchemas } = useCrudSchemas(crudSchemas)
const searchParams = ref({})
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    // const res = await getListApi({
    //   page: unref(currentPage),
    //   limit: unref(pageSize),
    //   ...unref(searchParams)
    // })
    let res = undefined
    setTimeout(() => {
      res = {
        data: {
          list: [],
          count: 0
        }
      }
    }, 1000)
    return {
      list: res.data.list,
      total: res.data.count
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods
const openImg = (img: string) => {
  createImageViewer({
    urlList: [img]
  })
}
</script>

<template>
  <ContentDetailWrap title="产品详情">
    <el-descriptions title="基础信息">
      <el-descriptions-item label="产品名称：">{{ currentRow.name }}</el-descriptions-item>
      <el-descriptions-item label="产品保质期：">
        {{ currentRow.expiration_date }}
      </el-descriptions-item>
      <el-descriptions-item label="产品图片：">
        <BaseButton @click="openImg(currentRow.img)">点击查看</BaseButton>
      </el-descriptions-item>
      <el-descriptions-item label="产品简介">{{ currentRow.description }}</el-descriptions-item>
      <el-descriptions-item label="产品分类：">{{ currentRow.cate_name }}</el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <el-descriptions title="规格信息" :column="4">
      <template v-for="item in currentRow.rule" :key="item.id">
        <el-descriptions-item label="规格名称：">{{ item.name }}</el-descriptions-item>
        <el-descriptions-item label="进货价：">{{ item.purchasing_price }}</el-descriptions-item>
        <el-descriptions-item label="售卖价：">{{ item.money }}</el-descriptions-item>
        <el-descriptions-item label="规格图片：">
          <BaseButton @click="openImg(item.img)">点击查看</BaseButton>
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <el-divider />
    <el-descriptions title="产品介绍" :border="true">
      <el-descriptions-item>
        <div v-html="currentRow.introduction"></div>
      </el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <el-descriptions title="产品所关联的门店信息">
      <el-descriptions-item>
        <Search
          :schema="allSchemas.searchSchema"
          @search="setSearchParams"
          @reset="setSearchParams"
        />
        <Table
          v-model:pageSize="pageSize"
          v-model:currentPage="currentPage"
          :columns="allSchemas.tableColumns"
          :data="dataList"
          :loading="loading"
          :pagination="{ total }"
          @register="tableRegister"
        />
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <div class="w-full flex items-center justify-center">
        <BaseButton @click="emit('close')">关闭</BaseButton>
      </div>
    </template>
  </ContentDetailWrap>
</template>
